<template>
    <ex-dialog
      width="1200px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" :disabled="disabled" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品ID：">
                <div>{{info.goodsId}}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="赚卡名称：">
                <div>{{info.cardName}}</div>
              </el-form-item> 
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="会员昵称：">
                <div>{{info.nickName}}</div>
              </el-form-item> 
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="评价内容："> 
                <div>{{info.content}}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="评价图片:" prop=""  ref="imgRef">
                <ImageUploadMore :limit="6" :fileSize="20" @successImg="getCommodityImgList($event)"
                    :value="ruleForm.imageArr" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="评分：">
                <div>{{info.score}}星</div>
              </el-form-item> 
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="评价时间："> 
                <div>{{info.evaluateTime}}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button_box">
        <el-button type="danger" @click="submitForm('ruleForm',3)">审核驳回</el-button>
        <el-button
          type="primary"
          :loading="AgreeLoading"
          @click="submitForm('ruleForm',2)"
        >审核通过</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    examineEvaluate,
    evaluateExamine
  } from "@/api/merchantsNFR/evaluate";
  import '@wangeditor/editor/dist/css/style.css'
  import {
    Editor,
    Toolbar
  } from "@wangeditor/editor-for-vue";
  import WangEditor from '@/components/WangEditor'
  export default {
    components: {
      Loading,
      WangEditor,
      Editor,
      Toolbar
    },
    props: {
      visible: Boolean,
      id: String,
      pathType: String,
    },
    data() {
      return {
        labelWidth: "150px",
        inputWidth: "420px",
        title: "评价审核",
        loading: false,
        disabled: false,
        AgreeLoading: false,
        info: {},
        ruleForm: {
          id: '',
          imageArr: [],//图文介绍
          status: '',//审核状态 2 已通过 3 已驳回
        },
        rules: {
          imageArr: [
            {required: true, message: "请上传弹窗图片",trigger: ["change"]}
          ],
        },
        
      };
    },
    computed: {},
    created() {
      console.log('this.id',this.id)
      this.getInfo()
    },
    mounted() {
      
    },
    computed: {},
    methods: {
      //获取详情
      getInfo(){
        var id = this.id
        examineEvaluate(id).then(res => {
          var data = res.result
          this.ruleForm.id = data.id
          this.ruleForm.imageArr = data.imageArr
          this.info = data
        })
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      //驳回
      handleDown(){
        this.AgreeLoading = true
        this.$confirm('是否同意驳回', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = {
            merchantEquityIdList: this.selectId,
            sellStatus: type
          }
          editStatus(data).then((response) => {
            setTimeout(() => {
              this.handleClose()
              this.$message.success('操作成功')
              this.$emit('success')
              this.AgreeLoading = false
            }, 1000);
          });
        }).catch(() => {
          this.AgreeLoading = false
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      
      },
      getCommodityImgList(e, index) {
        console.log(e, index)
        if (e != '') {
          this.ruleForm.imageArr = e.split(",")
        } else {
          this.ruleForm.imageArr = []
        }
        this.$refs['commodityImgListRef'].clearValidate();
      },
    
     
      getTime(e){
        console.log("e",e)
        this.ruleForm.startTime =  e[0] 
        this.ruleForm.endTime = e[1]
        console.log("e",this.ruleForm.startTime)
        console.log("e",this.ruleForm.endTime)
      },
      
      submitForm(formName,type) {
        this.ruleForm.status = type
        console.log(this.ruleForm);
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm
            }
            evaluateExamine(data).then(res => {
              this.handleClose()
              this.$message.success('操作成功')
              this.$emit('success')
              this.AgreeLoading = false
            }).finally(()=>{
              this.AgreeLoading = false
            })
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      editForm(formName, status) {
        //编辑确定
        console.log(this.ruleForm);
        this.$refs[formName].validate(valid => {
          if (valid) {
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select{
    width: 100%;
  }
  .main {
    padding: 20px 20px;
  }
  .richText {
    border: 1px solid #ccc;
    line-height: normal;
  }
  .stockNum{
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }
  .button_box{
    display: flex;
    justify-content: center;
  }
  .equityImgBox{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .equityImgBox img{
    width: 120px;
    height: 120px;
  }
  .el-form-item{
    margin-bottom: 32px;
  }
  .list_start{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .el-input{
      width: 300px;
      margin-left: 10px;
    }
  }
  </style>
  